* {
    padding: 0;
    margin: 0 auto;
}

.a span {
    color: red;
}

/* .a span:first-child {
    font-size: 20px;
}

.a span:last-child {
    font-size: 22px;
    color: skyblue;
} */
/* 1 - ... */
/* .a p:nth-child(odd) {
    background: greenyellow
}

.a p:nth-child(even) {
    background: orange
} 
.a p:nth-child(3n) {
    background: orange;
}
.a p:nth-child(n+3) {
    background: orange;
}

form input:focus {
    color: red;
}  
*/

form button:focus ~ .b{
    width: 200px;
    height: 200px;
    background: red;
    transition: all .4s;
} 

::selection {
    color: skyblue;
    background: greenyellow;
}

.x {
    width: 500px;
    height: 500px;
    margin-left: 300px;
    background: red;
    position: relative;
}
.y {
   width: 300px;
   height: 200px;
   background: #362;
   /* position: relative; */
}

.z {
   width: 400px;
   height: 600px;
   position: absolute;
   top: 30px;
   left: -100px;
   background: orange;
}
.cc {
    width: 100%;
    height: 100px;
    background: #000;
}
.dd {
    width: 600px;
    height: 700px;
    background: #666;
}
.ee {
    width: 600px;
    height: 700px;
    background: #666;
}
.ff {
    width: 600px;
    height: 700px;
    background: blueviolet;
}

